<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45cbff;}
	#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境
	/*
		arc(x, y, 半径, 起始弧度, 结束弧度, 旋转方向)
			-x, y : 起始位置---(圆心的位置)
			-弧度与角度的关系 : 弧度 = 角度*Math.PI/180
			-旋转方向 : 顺时针 false(默认)、逆时针 true

			注意：  1) 90度是最底部的点，-90度是最顶部的点
							 -90

					+/-180			0

							 90
	*/
		oGC.arc(200, 200, 150, 0, 90*Math.PI/180, false);
		oGC.stroke()
	}
	</script>
</head>
<body>
	<canvas id="c1" width="500" height="500">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>